<script type="text/html" id="templates/settings/export/png.html">
  <div class="export-panel-png">
    <div class="export-panel-header export-info">Export your animation as a PNG spritesheet containing all frames.</div>
    <div class="export-panel-section  png-export-layout-section">
      <div class="highlight" style="padding-bottom: 5px;">Spritesheet layout options:</div>
      <div style="display: flex; line-height: 20px;">
        <div style="flex: 1;">
          <span>Columns</span>
          <input type="number" min="1" class="textfield" id="png-export-columns" name="png-export-columns">
        </div>
        <div style="flex: 1;">
          <span>Rows</span>
          <input readonly="true" class="textfield" id="png-export-rows" name="png-export-rows">
        </div>
      </div>
    </div>
    <div class="export-panel-section">
      <div style="padding-bottom: 5px">
        <span class="highlight export-panel-row">Spritesheet file export: </span>
      </div>
      <div class="export-panel-row">
        <button type="button" class="button button-primary png-download-button">Download</button>
        <span class="png-export-dimension-info export-info"></span>
      </div>
    </div>
    <div class="export-panel-section">
      <div style="padding-bottom: 5px">
        <span class="highlight export-panel-row">Spritesheet data-uri export: </span>
      </div>
      <div class="export-panel-row">
        <button type="button" style="white-space: nowrap;" class="button button-primary datauri-open-button">Open</button>
        <span class="export-info">Open the spritesheet as a data-uri</span>
      </div>
    </div>

    <div class="export-panel-section">
      <div style="padding-bottom: 5px">
        <span class="highlight export-panel-row">PixiJS Movie export: </span>
      </div>
      <div class="checkbox-container" style="margin: 5px 0;">
        <input id="png-pixi-inline-image" class="png-pixi-inline-image-checkbox checkbox-fix" type="checkbox" />
        <label for="png-pixi-inline-image">Inline spritesheet as data-uri</label>
      </div>
      <div class="export-panel-row">
        <button type="button" class="button button-primary png-pixi-download-button"/>Download</button>
        <span class="export-info">Spritesheet with JSON metadata</span>
      </div>
    </div>

    <div class="export-panel-section">
      <div style="padding-bottom: 5px">
        <span class="highlight">Selected frame export:</span>
      </div>
      <div class="export-panel-row">
        <button type="button" class="button button-primary selected-frame-download-button"/>Download</button>
        <span class="export-info">Single frame as a PNG file</span>
      </div>
    </div>

  </div>
</script>
